import React, { useState } from "react";

const Parent = (props) => {
  const { name } = props;
  const [value, $value] = useState();

  const increaseFun = () => {};
  const decreaseFun = () => {};

  return (
    <>
      {/* 直接将所有的属性都挂在组件内部 */}
      <Child
        lebel={"lebel"}
        value={value}
        increaseFun={increaseFun}
        decreaseFun={decreaseFun}
      ></Child>
    </>
  );
};

const parentV1 = () => {
  const [value, $value] = useState();
  const onChildChange = () => {};
  return (
    <>
      {/* 将每个组件的逻辑都展开 */}
      <Child value={value} onChildChange={onChildChange}>
        <Child.label></Child.label>
        <Child.increaseCom icon={"increase"}></Child.increaseCom>
        <Child.count max={10}></Child.count>
        <Child.decreaseCom icon={"decrease"}></Child.decreaseCom>
      </Child>
    </>
  );
};

const parentV2 = () => {
  const [value, $value] = useState();
  // 这里直接返回的是参数
  const { getChildProps, getDesreaseProps, getIncreaseProps } = useChild({
    initial: 0,
    max: 10,
  });

  return (
    // 通过props的形式
    // 这样的灵活性更高，但是，props改变之后，需要可以被感知到
    <Child {...getChildProps()}>
      <Child.increaseCom icon={"increase"} {...getIncreaseProps()} />
      <Child.decreaseCom icon={"descrease"} {...getDesreaseProps()} />
    </Child>
  );
};

// reducer 模式方法
const parentV3 = () => {
  const reducer = (state, action) => {
    switch (action.type) {
      case "increase":
        return { count: state.count + 1 };
      case "decrease":
        return { count: state.count - 1 };
      default:
        return { count };
    }
  };
  const { count, handleCreasement, handelIncreasement } = useChild(
    { initial: 1, max: 10 },
    //   使用reducer的模式，自己控制自定义方法
    reducer
  );

  return (
    <>
      <Child value={count}>
        <Child.creaseCom onclick={handleCreasement} />
        <Child.increaseCom onclick={handelIncreasement} />
      </Child>
    </>
  );
};
export default Parent;
